

<template>
  <div class="app-container">
    <!-- 顶部 -->
    <mt-header fixed title="程香香的app"></mt-header>


    <!-- 中间的路由区域 -->
    <!-- 要想routes 路由里组建能够显示，必须要加上 <router-view> 填坑 -->
    <router-view></router-view>


    <!-- 底部table区域 -->
    <nav class="mui-bar mui-bar-tab">
			<router-link class="mui-tab-item-change" to="/home">
				<span class="mui-icon mui-icon-home"></span>
				<span class="mui-tab-label">首页</span>
			</router-link>
			<router-link class="mui-tab-item-change" to="/member">
				<span class="mui-icon mui-icon-contact"></span>
				<span class="mui-tab-label">会员</span>
			</router-link>
			<router-link class="mui-tab-item-change" to="/shopcar">
				<span class="mui-icon mui-icon-extra mui-icon-extra-cart"><span class="mui-badge" id="badge">9</span></span>
				<span class="mui-tab-label">购物车</span>
			</router-link>
			<router-link class="mui-tab-item-change" to="/search">
				<span class="mui-icon mui-icon-search"></span>
				<span class="mui-tab-label">搜索</span>
			</router-link>
		</nav>
    
  </div>
</template>

<script>
	
</script>


<style lang="scss" scoped>
	/*解决图片列表 里的头部层级问题*/
	.mint-header {
	  z-index: 99;
	}
	.app-container {
		padding-top: 40px;
		padding-bottom: 50px;
	}


	/*修改底部 tabbar 的样式，解决mui 遇到底部通栏不能切换的问题*/
	.mui-bar-tab .mui-tab-item-change {
   		 display: table-cell;
   		 overflow: hidden;
   		 width: 1%;
   		 height: 50px;
   		 text-align: center;
   		 vertical-align: middle;
   		 white-space: nowrap;
   		 text-overflow: ellipsis;
   		 color: #929292;
}
	.mui-bar-tab .mui-tab-item-change .mui-icon {
   		top: 3px;
   		width: 24px;
   		height: 24px;
   		padding-top: 0;
    	padding-bottom: 0;
	}
	.mui-bar-tab .mui-tab-item-change .mui-icon ~ .mui-tab-label {
    	font-size: 11px;
    	display: block;
    	overflow: hidden;
    	text-overflow: ellipsis;
	}
</style>
